<script>
import api from '@/api/apis/sceneRoom'
import { parseSceneData } from '@/utils/scene-data'
import Purpose from './Purpose.vue'
import FocusDeviceDescription from '@/views/runtimeOptimization/FocusDeviceDescription.vue'
import ElectricalDevice from '@/views/runtimeOptimization/ElectricalDevice.vue'
import ImprovementSuggestion from '@/views/runtimeOptimization/ImprovementSuggestion.vue'
import { now, subtractDateStr } from '@/utils/date-utils'

export default {
  name: 'RuntimeOptimization',
  components: { ImprovementSuggestion, FocusDeviceDescription, Purpose, ElectricalDevice },
  data() {
    return {
      queryForm: {
        sceneProjectId: null,
        startTime: subtractDateStr(new Date(), 7, 'YYYY-MM-DD'),
        endTime: now('YYYY-MM-DD')
      },
      loading: false,
      projectList: [],
      roomList: [],
      roomTreeList: [],
      focusEnergyDataList: [],
      electricalEnergyDataList: null,
      startTime: null,
      endTime: null
    }
  },
  created() {
    this.$api.commonSelected({
      code: 'SceneProjectSelected'
    }).then(response => {
      this.projectList = response.data
      if (this.projectList.length > 0) {
        this.queryForm.sceneProjectId = this.projectList[0].value
        this.getRoomList(this.queryForm.sceneProjectId)
      }
    })
    this.getList()
  },
  methods: {
    resetHandler() {
      this.queryForm = {
        sceneProjectId: this.queryForm.sceneProjectId
      }
    },
    onFocusEnergyData(focusEnergyData) {
      this.focusEnergyDataList = focusEnergyData.focusEnergyConsumptionList
      this.startTime = focusEnergyData.startTime
      this.endTime = focusEnergyData.endTime
    },
    onElectricalEnergyData(electricalEnergyData) {
      this.electricalEnergyDataList = electricalEnergyData
    },
    async getRoomList(sceneProjectId) {
      if (sceneProjectId == null || sceneProjectId === '') {
        this.roomList = []
        this.roomTreeList = []
      } else {
        const res = await api.queryRoomList({
          sceneProjectId,
          sortColumn: 'floorName',
          sortOrder: 'asc'
        })
        this.roomList = res.data;
        this.roomTreeList = parseSceneData(res.data)
      }
    },
    getList() {
      this.loading = true
      if (this.queryForm.roomInfo != null && this.queryForm.roomInfo.length > 0) {
        this.queryForm.sceneEdificeId = this.queryForm.roomInfo[0]
        if (this.queryForm.roomInfo.length > 1) {
          this.queryForm.sceneFloorId = this.queryForm.roomInfo[1]
        }
        if (this.queryForm.roomInfo.length > 2) {
          this.queryForm.sceneRoomId = this.queryForm.roomInfo[2]
        }
      } else {
        delete this.queryForm.sceneEdificeId
        delete this.queryForm.sceneFloorId
        delete this.queryForm.sceneRoomId
      }
      this.queryForm = { ...this.queryForm }
      this.loading = false
    }
  }
}
</script>

<template>
  <div class="runtime-optimization">
    <el-form :model="queryForm" inline>
      <el-form-item label="所属项目" prop="sceneProjectId">
        <el-select v-model="queryForm.sceneProjectId" @change="getRoomList">
          <el-option v-for="item in projectList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属场景" prop="roomInfo">
        <el-cascader placeholder="请选择所属场景" :props="{'multiple' : true,'checkStrictly': true}"
                     v-model="queryForm.roomInfo"
                     :options="roomTreeList">
        </el-cascader>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="queryForm.startTime" type="date" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="queryForm.endTime" type="date" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="getList" type="primary" icon="el-icon-search">查询</el-button>
        <el-button size="small" @click="resetHandler" icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="padding: 0 5%" v-loading="loading">
      <Purpose />
      <FocusDeviceDescription v-if="queryForm.sceneProjectId != null" :query-form="queryForm"
                              @focusEnergyData="onFocusEnergyData" :project-list="projectList" :room-list="roomList"/>
      <ElectricalDevice v-if="queryForm.sceneProjectId != null" :query-form="queryForm"
                        @electricalEnergyData="onElectricalEnergyData" :project-list="projectList"/>
      <ImprovementSuggestion v-if="endTime != null && electricalEnergyDataList !== null" :query-form="queryForm"
                             :project-list="projectList"
                             :start-time="startTime"
                             :end-time="endTime"
                             :electrical-energy-data-list="electricalEnergyDataList"
                             :focus-energy-data-list="focusEnergyDataList" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.runtime-optimization {
  overflow-y: auto;
  padding: 15px;
  background-color: #ffffff;
  height: 100%;
}
</style>
